Introduction to design systems 設計系統簡介

什麼是設計系統？

設計系統是一套可複用的元素和設計準則，用於幫助團隊以一致、標準化的方式來設計和開發產品。它把品牌規範、元件、配色方案等內容整合在一個統一的平臺中，方便團隊成員隨時查閱和使用。

設計系統包含的主要內容：

1 視覺樣式（Visual Styles）

包括字型（Typography）、顏色（Color Palettes）、圖示（Iconography）等。有助於保持品牌視覺一致性。

2 使用準則（Guidelines）

涵蓋設計原則、編輯規則、使用說明等。確保不同設計人員在使用元件或樣式時遵循一致的規範。

3 UI 模式（UI Patterns）

按層級細分為：

元素（Elements）：如文字、顏色、圖示。

元件（Components）：如按鈕、表單標籤等，由多個元素組成。

模組（Modules）：如導航欄或包含 logo 的頁首，由多個元件組成。

模板（Templates）：多個模組組合成完整頁面結構。

設計系統通常會附上說明，指明各類元素的使用頻率和優先順序。

4. 開發程式碼支援（Developer Code Support）

包括每個元件的標準化程式碼片段。幫助開發人員更準確地將設計實現為產品介面。

為什麼設計系統很重要？

增強一致性：視覺與互動保持統一。

提高效率：避免重複勞動，加快設計與開發速度。

降低溝通成本：多角色協作時更容易理解設計意圖。

改善使用者體驗：統一的介面元素讓使用者感到熟悉與可靠。